import React, { useState, useEffect, useRef } from 'react'
import { Image, Text, View, TapEvent, navigateTo } from 'remax/one'
import { Map, createMapContext } from 'remax/wechat'
import RecycleView from 'remax-recycle-view/lib'
import { Icon, Row, Space, Tag } from 'annar'
import useCloud from '@/hooks/use-cloud'
import useLocation from '@/hooks/use-location'
import styles from './index.css'

interface ScreenItemProps extends WBG.Screen {
  moveToLocation: (location: WBG.Location) => void
}

const ScreenItem = ({
  _id,
  name,
  address,
  location,
  imgUrls,
  coverage,
  price,
  moveToLocation,
}: ScreenItemProps) => {
  const onLocationTap = (e: TapEvent) => {
    e.stopPropagation()
    moveToLocation({
      longitude: location.coordinates[0],
      latitude: location.coordinates[1],
    })
  }

  return (
    <View className={styles.itemArea}>
      <View
        className={styles.itemBox}
        hoverClassName="hover"
        onTap={() => {
          navigateTo({ url: `/pages/screen/index?_id=${_id}` })
        }}
      >
        <Space className={styles.itemContent} direction="vertical" size={12}>
          <Image
            className={styles.avatarImg}
            src={imgUrls[0]}
            mode="aspectFill"
          />
          <View className="large-text ellipsis">{name}</View>
          <Row justify="center">
            <Icon type="locationfill" />
            <View className="location-text ellipsis" onTap={onLocationTap}>
              {address}
            </View>
          </Row>
          <Row justify="space-around">
            <View>
              <View>
                <Text className="small-text">￥</Text>
                <Text className="large-text">0</Text>
              </View>
              <Text className="small-text">本店直接营业额</Text>
            </View>
            <View>
              <View>
                <Text className="large-text">0</Text>
                <Text className="small-text">人</Text>
              </View>
              <Text className="small-text">本店引流人数</Text>
            </View>
            <View>
              <View>
                <Text className="large-text">{coverage}</Text>
                <Text className="small-text">人</Text>
              </View>
              <Text className="small-text">覆盖人数(约)</Text>
            </View>
            <View>
              <View>
                <Text className="small-text">￥</Text>
                <Text className="large-text">
                  {Math.round((price / 7) * 10) / 10}
                </Text>
              </View>
              <Text className="small-text">每日广告价格</Text>
            </View>
          </Row>
        </Space>
      </View>
    </View>
  )
}

export default () => {
  const { location } = useLocation()
  const { data, mutate } = useCloud(location ? 'list-screen' : null, {
    location,
  })
  const [loading, setLoading] = useState(false)
  const mapRef = useRef<WechatMiniprogram.MapContext>()

  useEffect(() => {
    mapRef.current = createMapContext('screenMap')
  }, [])

  if (!location) {
    return null
  }

  return (
    <>
      <Map
        id="screenMap"
        className={styles.mapArea}
        longitude={location.longitude}
        latitude={location.latitude}
        scale={11}
        showLocation
        markers={data?.map((v: WBG.Screen, i: number) => ({
          id: i,
          longitude: v.location.coordinates[0],
          latitude: v.location.coordinates[1],
          width: 15,
          height: 20,
        }))}
      >
        <View
          className={styles.mapCover}
          onTap={() => {
            mapRef.current?.moveToLocation({})
          }}
        >
          <Icon type="radiobox" size="40px" />
        </View>
      </Map>
      {data &&
        (data.length ? (
          <RecycleView
            className={styles.mainArea}
            refresherEnabled
            refresherTriggered={loading}
            onRefresherRefresh={async () => {
              setLoading(true)
              await mutate()
              setLoading(false)
            }}
            data={data.map((v: WBG.Screen) => ({ ...v, height: 400 }))}
            renderItem={(item, index) => {
              return (
                <ScreenItem
                  {...((item as unknown) as WBG.Screen)}
                  moveToLocation={location => {
                    mapRef.current?.moveToLocation(location)
                  }}
                />
              )
            }}
          />
        ) : (
          <View className="empty-view small-text">
            您附近没有找到可用的大屏
          </View>
        ))}
    </>
  )
}
